<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>

<html lang="en">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-个人中心-账户设置-账户安全-支付密码</title>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div  th:include="personal/personalhead::order-personalhead-nav"></div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div  th:include="personal/personalsearch::order-personalsearch-nav"></div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
		<div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
		<div class="centerbody personal_middle_main">
			<div class="personal_middle_main_tit">
				<span>帐户设置</span>><span>帐户安全</span>><span>修改支付密码</span>
			</div>
			<!-- 订单tab标签 -->
			<div data-role="page">
        		<div data-role = "content-floud">
					<div class="publicBox">
						<div class="realName pad_20">
							<span th:if = "${member}">
								<p class="realNameForm">
									<label>手机号：</label>
									<input type="text" th:value="${member.memberPhone}" readonly="readonly" id = "orig_phone">
								</p>
							</span>
							<p class="realNameForm">
								<label>新密码：</label>
								<input type="password" value="" placeholder="密码为长度6位的数字" id = "new_pwdo" maxlength="6">
							</p>
							<p class="realNameForm">
								<label>确认密码：</label>
								<input type="password" value="" placeholder="密码为长度6位的数字" id = "new_pwdt" maxlength="6">
							</p>
							<p class="realNameForm">
								<label>手机验证码：</label>
								<span class="reaCodeBox">
									<input class="realTxtCode" type="text" value="" placeholder="请输入验证码" id = "sms_code">
									<em class="realNameCode">获取验证码</em>
								</span>
							</p>
							<p class="realNameBut"><button name="" id = "update_paypwd_sub">修改</button></p>
						</div><!--LineConf-->
					</div><!--个人信息-->
				</div>
				<!-- token -->
				<input type="hidden" id="user_token"/>
   			 </div>
			<!-- 全部订单 -->
			
		</div>
		<div style="clear:both;"></div>
	</div>
	
	<!-- 页面底部 -->
	<div th:include="footer::footer"></div>

</body>
<script th:inline="javascript">
$(function(){
	/*tab标签切换*/
    function tabs(tabTit,on,tabCon){
        $(tabCon).each(function(){
            $(this).children().eq(0).show();
        });
        $(tabTit).each(function(){
            $(this).children().eq(0).addClass(on);
        });
        $(tabTit).children().click(function(){
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
            $(tabCon).children().eq(index).show().siblings().hide();
        });
    }
    tabs(".LineTitle","Line_on",".LineCon");
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
   		$('input.paybutton').eq(0).addClass('choose');
   		
   		$('input.paybutton').hover(function(){
   			$(this).addClass('choose');
   			$(this).siblings().removeClass('choose');
   		},function(){
   			$(this).removeClass('choose');
   		})
    	$('.cancel_small').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
		
		$('.add_info').click(function(){
			$('.shadow').css('display','block');
			$('.login_box_2').css('display','block');
		})
		$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		})
		 $("#hear li").click(function(){
    $(this).css({
         borderBottom: "2px solid red",
         height:"43px"
    }).siblings().css({
        borderBottom: "none",
        height:"45px"
    });
});                
                         
$("#hear li").click(function(){
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#contentop li").eq(index).css("display","block").siblings().css("display","none");
        });
})
//获取短信验证码
var validCode = true;
$(".realNameCode").click (function  () {
	callvalidCode();
})
function callvalidCode() {
	var time = 30;
	var code = $(".realNameCode");
	if (validCode) {
		validCode = false;
		if(!isNotNull("orig_phone")){
			validCode = true;
			return;
		}
		if(!verifyPayPwd()){
			validCode = true;
			return;
		}
		$.ajax({
			url : "/member/sendSmsCode",
			type : "post",
			dataType : "json",
			data : {
				"phone" : $('#orig_phone').val()
			},
			error : function() {
				layer.msg("系统繁忙，请稍后再试！");
				validCode = true;
			},
			success : function(data) {
				if (data.code == "200") {
					code.addClass("msgs1");
					$("#user_token").val(data.token);
					var t = setInterval(function() {
						time--;
						code.html(time + "秒");
						if (time == 0) {
							clearInterval(t);
							code.html("重新获取");
							validCode = true;
							code.removeClass("msgs1");
						}
					}, 1000)
				} else {
					layer.msg(data.message);
					validCode = true;
				}
			}
		})
	}
}
var tipsIndex;
$(function(){
	bingClosetipsIndex();
});
//非空验证
function isNotNull(id){
	var val = $('#'+id).val();
	if(val.trim().length < 1){
		tipsIndex = layer.tips("此处不能为空","#"+id,{tips: 2});
		return false;
	}
	return true;
};
function bingClosetipsIndex(){
	$('#new_pwdo').on("focus",function(){
		if(tipsIndex){
			layer.close(tipsIndex);
		}
	});
	$('#new_pwdt').on("focus",function(){
		if(tipsIndex){
			layer.close(tipsIndex);
		}
	});
	$('#sms_code').on("focus",function(){
		if(tipsIndex){
			layer.close(tipsIndex);
		}
	});
}
function equel(){
	var new_pwdo = $('#new_pwdo').val();
	var new_pwdt = $('#new_pwdt').val();
	if(new_pwdo != new_pwdt){
		var newPwdIndex = layer.tips("确认密码不匹配","#new_pwdt",{tips: 2});
		$('#new_pwdt').on("focus",function(){
			layer.close(newPwdIndex);
		});
		return false;
	}
	return true;;
}
$('#update_paypwd_sub').click(function(){
	if(isNotNull("orig_phone") 
			&& isNotNull("new_pwdo") && verifyPayPwd()
			&& isNotNull("new_pwdt") && equel() && isNotNull("sms_code")){
		$('#update_paypwd_sub').attr("disable", true);
		$.ajax({
			url : "/member/verifySmsCode",
			type : "post",
			dataType : "json",
			data : {
				"phone" : $('#orig_phone').val(),
				"smsCode" : $('#sms_code').val()
			},
			error : function() {
				layer.msg("系统繁忙，请稍后再试！");
				$('#update_paypwd_sub').attr("disable", false);
			},
			success : function(data) {
				$('#update_paypwd_sub').attr("disable", false);
				if (data.code == "200") {
					updatesub();
				} else {
					layer.msg(data.message);
				}
			}
		})
	}
})
// 修改支付密码正式提交
function updatesub(){
	var orig_phone = $("#orig_phone").val();
	var new_pwdo = $("#new_pwdo").val();
	$.ajax({
		url:"/account/updatePayPwdSubmit",
		type:"post",
		dataType:"json",
		data:{"phone":orig_phone,"newPwd":new_pwdo,"token":$("#user_token").val()},
		error:function(){
			layer.msg("系统繁忙，请稍后再试！");
		},
		success:function(data){
			if(data.code == "200"){
				window.location.href="/account/commonPrompt?pCode=3";
			}else{
				layer.msg("系统繁忙，请稍后再试！");
			}
		}
	})
}
function verifyPayPwd(){
	var payPwd = $("#new_pwdo").val().trim();
	if(payPwd.length<6 || isNaN(payPwd)){
		tipsIndex = layer.tips("密码格式错误，必须为6为纯数字","#new_pwdo",{tips: 2});
		return false;
	}
	return true;
}
</script>

</html>